<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户添加页面</title>
    </head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back"><i class="layui-icon">&#xe65c;</i>返回</button>
        <h1 class="layui-col-md-offset5">修改用戶</h1>
    </div>

    <hr/>

    <form class="layui-form " id="userForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input th:value="${user.id}" name="id" hidden="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input th:value="${user.username}" type="text" name="username" lay-verify="required" placeholder="请输入姓名" autocomplete=" off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="layui-input-inline">
                <img alt="用户图片" th:src="${user.headimg}" class="layui-nav-img" id="headimg"/>
                <button type="button" class="layui-btn" id="uploadimg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input type="hidden" name="headimg" th:value="${user.headimg}" id="imgsrc" />
            <div class="layui-form-mid layui-word-aux" id="nameMsg"></div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input type="text" th:value="${user.phone}" name="phone" lay-verify="required" placeholder="请输入电话" autocomplete=" off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" th:value="${user.email}" lay-verify="required" placeholder="请输入邮箱" autocomplete=" off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" th:value="${user.age}" name="age" lay-verify="required" placeholder="请输入邮箱" autocomplete=" off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block">
                    <input type="text" th:value="${{user.birthday}}" name="birthday" id="date1" placeholder="yyyy-MM-dd" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
        <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'laydate', 'layer', 'upload'], function () {
        var form = layui.form;
        var upload = layui.upload;
        laydate = layui.laydate;
        $ = layui.jquery;
        layer = layui.layer;
        form.render(); //更新全部
        laydate.render({
            elem: '#date1'
        });


        /*****************************
         * @Description: 文件上传
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        var uploadInst = upload.render({
            elem: '#uploadimg' //绑定元素
            ,
            url: 'upload/simpleupload' //上传接口
            ,
            done: function (res) {
                //上传完毕回调
                $("#headimg").attr("src",res.data);
                $("#imgsrc").val(res.data);
            },
            error: function () {
                //请求异常回调
            }
        });

        /*****************************
        * @Description: 表单提交
        * @Param:  
        * @return:  
        * @Author: 刘涛 
        * @Date: 2018/3/14 
        *******************************/
        form.on('submit(*)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url: "/user/saveOrUpdateUserInBack",
                dataType: "json",
                data: data.field,
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg+'页面稍后跳转', {icon: 1, anim: 1});
                        setTimeout('$("#content-body").load("/user/goUserPage")',3000);
                    } else {
                        layer.msg(data.msg, {icon: 2, anim: 6});
                    }
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        /**
         * 返回按钮
         * */
        $("#back").click(function () {
            $("#content-body").load("/user/goUserPage");
        })

    });
</script>

</body>
</html>